<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="50%"
    :with-header="false"
    :width="700"
  >
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img
              class="drawer_t_l_img"
              src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt=""
            />
            权益详情
          </div>
          <img
            class="drawer_t_r"
            src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="drawer = false"
          />
        </div>
        <div class="button_box">
          <div
            class="button"
            v-for="item in tabData"
            :key="item.ID"
            :class="tabID == item.ID ? 'button_color' : ''"
            @click="changeTab(item.ID)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 权益内容 -->
      <div class="drawer_content" v-if="tabID == 1">
        <div class="block">
          <div
            style="position: absolute;height: 100%;display: flex;justify-content: space-between;width: 100%;overflow: hidden;"
          >
            <div class="drawer_content_left drawer_content_list">
              <div
                class="line"
                v-for="item in 50"
                :style="{ top: item * 4.8 + 'rem' }"
                :key="item"
              >
                <div class="yuan"></div>
                <div class="xian"></div>
                <div class="yuan"></div>
              </div>
            </div>
            <div class="drawer_content_right drawer_content_list"></div>
          </div>
          <div class="text_content">
            <template>
              <div class="list_text">
                <div class="list_text_left">权益名称:</div>
                <div class="list_text_right">{{ messageList.Name }}</div>
              </div>
              <!-- <div class="list_text">
                                <div class="list_text_left">权益类型:</div>
                                <div class="list_text_right">{{ messageList.ProductFlagListName }}</div>
                            </div> -->
              <div class="list_text">
                <div class="list_text_left">权益标签:</div>
                <div class="list_text_right list_text_flex">
                  <template v-if="messageList.EquityFlagListName">
                    <span
                      class="tag"
                      v-for="(item,
                      index) in messageList.EquityFlagListName.split(',')"
                      :key="index"
                      >{{ item }}</span
                    >
                  </template>
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">采购公司权限设置:</div>
                <div class="list_text_right">
                  <template v-if="messageList.TransferRuleIDName">
                    <span
                      class="tag"
                      v-for="(item,
                      index) in messageList.TransferRuleIDName.split(',')"
                      :key="index"
                      >{{ item }}</span
                    >
                  </template>
                </div>
              </div>

              <div class="list_text">
                <div class="list_text_left">使用期限:</div>
                <div class="list_text_right">
                  {{ messageList.EffectiveTime }} 至
                  {{ messageList.ExpireTime }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">是否为权益礼包:</div>
                <div class="list_text_right">
                  {{ messageList.TypeID == 1 ? "否" : "是" }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">权益数量:</div>
                <div class="list_text_right">
                  {{ messageList.EquityListCount }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">权益状态:</div>
                <div class="list_text_right">
                  <span
                    style="padding: .5rem 1.5rem;background-color: #FDF5EF;color: #E8A05E;border-radius: 2rem;"
                    >{{ messageList.StatusName }}</span
                  >
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">上架位置:</div>
                <!-- {{messageList.Status}} -->
                <div class="list_text_right">
                  <span
                    v-if="messageList.Status == 7 || messageList.Status == 8"
                    style="padding: .5rem 1.5rem;background-color: #F8F4FF;color: #A888EC;border-radius: 2rem;"
                    >权益平台</span
                  >
                  <span
                    v-else-if="
                      messageList.Status == 6 || messageList.Status == 8
                    "
                    style="padding: .5rem 1.5rem;background-color: #F8F4FF;color: #A888EC;border-radius: 2rem;"
                    >小程序</span
                  >
                  <span
                    v-else
                    style="padding: .5rem 1.5rem;background-color: #F8F4FF;color: #A888EC;border-radius: 2rem;"
                    >未上架</span
                  >
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">权益平台上架时间:</div>
                <div class="list_text_right">
                  {{
                    messageList.PlatformShelfTime
                      ? messageList.PlatformShelfTime
                      : "----"
                  }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">小程序上架时间:</div>
                <div class="list_text_right">
                  {{
                    messageList.EquityShelfTime
                      ? messageList.EquityShelfTime
                      : "----"
                  }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">库存数量:</div>
                <div class="list_text_right">
                  {{ messageList.InventoryQuantity }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">起购数量:</div>
                <div class="list_text_right">
                  {{ messageList.MinimumQuantity }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">销售数量:</div>
                <div class="list_text_right">
                  <!-- {{ messageList.PlatformSoldQuantity + messageList.EquitySoldQuantity }} -->
                  {{ messageList.SoldQuantity }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">总销量:</div>
                <div class="list_text_right">
                  {{ messageList.SoldQuantity }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">市场价格:</div>
                <div class="list_text_right">{{ messageList.SalePrice }}</div>
              </div>
              <div class="list_text">
                <div class="list_text_left">平台价格:</div>
                <div class="list_text_right">{{ messageList.CostPrice }}</div>
              </div>
              <div class="list_text">
                <div class="list_text_left">服务费:</div>
                <div class="list_text_right">
                  <div class="list_text_right_table">
                    <div class="th" style="background-color: #F6F2F0;">
                      <div style="width: 50%;text-align: left;">权益名称</div>
                      <div style="width: 30%;">权益平台服务费</div>
                      <div style="width: 20%;">小程序服务费</div>
                    </div>
                    <div class="tr" v-for="item in rightList" :key="item.ID">
                      <div style="width: 50%;text-align: left;">
                        {{ item.Name }}
                      </div>
                      <div style="width: 30%;">
                        {{
                          item.PlatformServiceRate
                            ? item.PlatformServiceRate * 100
                            : 0
                        }}%
                      </div>
                      <div style="width: 20%;">
                        {{
                          item.EquityServiceRate
                            ? item.EquityServiceRate * 100
                            : 0
                        }}%
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">让利积分:</div>
                <div class="list_text_right">{{ messageList.Integral }}</div>
              </div>
              <div class="list_text">
                <div class="list_text_left">权益平台结算价格:</div>
                <div class="list_text_right">
                  {{ messageList.PlatformServicePrice }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">小程序结算价格:</div>
                <div class="list_text_right">
                  {{ messageList.EquityServicePrice }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left" style="line-height: 3rem;">
                  是否允许在其他国企民企平台进行售卖:
                </div>
                <div class="list_text_right">{{ messageList.IsOpenSale ?'是':'否' }}</div>
              </div>
              <!-- 使用人数 -->
              <div class="list_text">
                <div class="list_text_left">使用人数:</div>
                <div class="list_text_right">
                  <div class="list_text_right_table">
                    <div class="th" style="background-color: #F6F2F0;">
                      <div style="width: 70%;text-align: left;">权益名称</div>
                      <div style="width: 30%;">使用人数</div>
                    </div>
                    <div
                      class="tr"
                      v-for="(item, index) in useCount"
                      :key="index"
                    >
                      <div style="width: 70%;text-align: left;">
                        {{ item.Name }}
                      </div>
                      <div style="width: 30%;">
                        {{ item.UsersCount ? item.UsersCount : 0 }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left" style="line-height: 3rem;">
                  购买是否需要提供身份信息:
                </div>
                <div class="list_text_right">
                  {{ messageList.IsRealNameAuthentication ? "是" : "否" }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">是否允许退款:</div>
                <div class="list_text_right">
                  {{ messageList.IsRefund ? "是" : "否" }}
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">访问量:</div>
                <div class="list_text_right">{{ messageList.Visits }}</div>
              </div>
              <!-- 权益图片 -->
              <div class="list_text">
                <div class="list_text_left">权益图片:</div>
                <div class="list_text_right">
                  <img
                    v-if="messageList.MainPicturePath"
                    :src="JSON.parse(messageList.MainPicturePath)[0].url"
                    alt=""
                  />
                  <template v-if="messageList.SecondaryPicturePath">
                    <img
                      v-for="(item, ind) in JSON.parse(
                        messageList.SecondaryPicturePath
                      )"
                      :src="item.url"
                      :key="ind"
                      alt=""
                    />
                  </template>
                </div>
              </div>
              <div class="list_text">
                <div class="list_text_left">创建时间:</div>
                <div class="list_text_right">{{ messageList.CreateTime }}</div>
              </div>
            </template>
          </div>
        </div>

        <div class="block_title">包含权益</div>
        <div v-for="(item, ind) in rightList" :key="ind">
          <div class="list_title">权益{{ ind + 1 }}:</div>
          <div class="block">
            <div
              style="position: absolute;height: 100%;display: flex;justify-content: space-between;width: 100%;overflow: hidden;"
            >
              <div class="drawer_content_left drawer_content_list">
                <div
                  class="line"
                  v-for="item in 50"
                  :style="{ top: item * 4.3 + 'rem' }"
                  :key="item"
                >
                  <div class="yuan"></div>
                  <div class="xian"></div>
                  <div class="yuan"></div>
                </div>
              </div>
              <div class="drawer_content_right drawer_content_list"></div>
            </div>
            <div class="text_content">
              <template>
                <div class="list_text">
                  <div class="list_text_left">权益名称:</div>
                  <div class="list_text_right">{{ item.Name }}</div>
                </div>
                <div class="list_text">
                  <div class="list_text_left">使用期限:</div>
                  <div class="list_text_right">
                    {{ item.EffectiveTime }}~{{ item.ExpireTime }}
                  </div>
                </div>
                <div class="list_text">
                  <div class="list_text_left">库存数量:</div>
                  <div class="list_text_right">
                    {{ item.InventoryQuantity }} 份
                  </div>
                </div>
                <div class="list_text">
                  <div class="list_text_left">关联合同:</div>
                  <div
                    class="list_text_right"
                    style="color: #426CE9;text-decoration: underline;cursor: pointer;"
                  >
                    {{ item.ProductCode }}
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
        <!-- 退款规则 -->
        <div class="block_title" v-if="refundRules.length">退款规则</div>
        <template v-if="refundRules.length">
          <div v-for="(item, ind) in refundRules" :key="ind">
            <div class="list_title">{{ item.Name }}</div>
            <div class="text_content flexc">
              <div class="list_text">
                <div v-for="(info, index) in item.list" :key="index">
                  {{ info.Name }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <!-- 售卖情况 -->
      <div class="sales-status" v-if="tabID == 2">
        <el-table :data="salesData" style="width: 100%">
          <el-table-column
            prop=""
            label="序号"
            width="60"
            type="index"
            :index="getIndex"
          ></el-table-column>
          <el-table-column prop="PayCode" label="订单编号" width="width">
          </el-table-column>
          <el-table-column prop="PurchaserID" label="买家" width="width">
          </el-table-column>
          <el-table-column prop="Quantity" label="购买数量" width="width">
          </el-table-column>
          <el-table-column prop="TotalPrice" label="下单金额(元)" width="width">
          </el-table-column>
          <el-table-column prop="Status" label="使用状态" width="width">
          </el-table-column>
          <el-table-column
            prop="ServiceCompanyName"
            label="服务方"
            width="width"
          >
          </el-table-column>
          <el-table-column prop="Name" label="权益名称" width="width">
          </el-table-column>
          <el-table-column prop="CreateTime" label="下单时间" width="width">
          </el-table-column>
        </el-table>
        <div class="end" v-if="salesPageData.total > 0">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="salesPageData.total"
            :current-page="salesPageData.currentPage"
            :page-size="salesPageData.pageSize"
            @current-change="handleSalesChange"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 权益下发 -->
      <div class="sales-status" v-if="tabID == 3">
        <div class="block">
          <div
            style="position: absolute;height: 100%;display: flex;justify-content: space-between;width: 100%;overflow: hidden;"
          >
            <div class="drawer_content_left drawer_content_list">
              <div
                class="line"
                v-for="item in 50"
                :style="{ top: item * 4.8 + 'rem' }"
                :key="item"
              >
                <div class="yuan"></div>
                <div class="xian"></div>
                <div class="yuan"></div>
              </div>
            </div>
            <div class="drawer_content_right drawer_content_list"></div>
          </div>
          <div class="text_content">
            <template>
              <div class="list_text">
                <div class="list_text_left">剩余核销码数量:</div>
                <div class="list_text_right">{{ issueNum }}个</div>
              </div>
              <div class="list_text">
                <div class="list_text_left">添加使用人:</div>
                <div
                  class="list_text_right"
                  @click="handleShowUseCount"
                  style="color: #426CE9;text-decoration: underline;cursor: pointer;"
                >
                  点击添加使用人
                </div>
              </div>
              <!-- 核销码下发 -->
              <div class="list_text">
                <div class="list_text_left">核销码下发列表:</div>
                <div class="list_text_right">
                  <el-table :data="issueData" style="width: 100%">
                    <el-table-column
                      prop=""
                      label="序号"
                      width="60"
                      type="index"
                      :index="getIndex"
                    ></el-table-column>
                    <el-table-column prop="Name" label="使用人" width="width">
                    </el-table-column>
                    <el-table-column
                      prop="Status"
                      label="使用状态"
                      width="width"
                    >
                      <template slot-scope="scope">
                        <div
                          class="status-box"
                          :class="`status${scope.row.StatusID}`"
                        >
                          {{ scope.row.Status }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="Quantity" label="数量" width="width">
                    </el-table-column>
                    <el-table-column
                      prop="PayTime"
                      label="下发时间"
                      width="width"
                    >
                    </el-table-column>
                  </el-table>
                  <div class="end" v-if="total > 0">
                    <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="issuePageData.total"
                      :current-page="issuePageData.currentPage"
                      :page-size="issuePageData.pageSize"
                      @current-change="handleIssueChange"
                    >
                    </el-pagination>
                  </div>
                </div>
              </div>
              <!-- 剩余核销码链接 -->
              <!-- <div class="list_text">
                                <div class="list_text_left">剩余核销码链接:</div>
                                <div class="list_text_right">
                                    <el-table
                                      :data="residueData"
                                      style="width: 100%">
                                      <el-table-column prop="" label="序号" width="60" type="index" :index="getIndex"></el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="使用人"
                                        width="width">
                                      </el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="使用状态"
                                        width="width">
                                      </el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="数量"
                                        width="width">
                                      </el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="下发时间"
                                        width="width">
                                      </el-table-column>
                                    </el-table>
                                    <div class="end" v-if="total > 0">
                                        <el-pagination background layout="prev, pager, next" :total="residuePageData.total" :current-page="residuePageData.currentPage"
                                            :page-size="residuePageData.pageSize" @current-change="handleResidueChange">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div> -->
              <!-- 已使用核销码数量 -->
              <!-- <div class="list_text">
                                <div class="list_text_left">已使用核销码数量:</div>
                                <div class="list_text_right">{{ employData.length}}个</div>
                            </div>
                            <div class="list_text">
                                <div class="list_text_left">已使用核销码:</div>
                                <div class="list_text_right">
                                    <el-table
                                      :data="employData"
                                      style="width: 100%">
                                      <el-table-column prop="" label="序号" width="60" type="index" :index="getIndex"></el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="使用人"
                                        width="width">
                                      </el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="使用状态"
                                        width="width">
                                      </el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="数量"
                                        width="width">
                                      </el-table-column>
                                      <el-table-column
                                        prop="prop"
                                        label="下发时间"
                                        width="width">
                                      </el-table-column>
                                    </el-table>
                                    <div class="end" v-if="total > 0">
                                        <el-pagination background layout="prev, pager, next" :total="employPageData.total" :current-page="employPageData.currentPage"
                                            :page-size="employPageData.pageSize" @current-change="handleEmployChange">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div> -->
            </template>
          </div>
        </div>
      </div>
      <!-- 审核历史 -->
      <div class="audit_history" v-if="tabID == 4">
        <div class="history" v-if="historyData != false">
          <div class="audit-item" v-for="item in historyData" :key="item.ID">
            <div class="audit-left"></div>
            <div class="audit-right">
              <div class="audit-right-box">
                <div
                  class="tag"
                  :class="{
                    success: [5,6,7].includes(item.StatusID),
                    error:[3,4,16,17].includes(item.StatusID),
                    info: [0,1,2,].includes(item.StatusID)
                  }"
                  v-if="item.StatusID != 0"
                >
                  {{ item.Status }}
                </div>
                <div class="text">{{ item.Opinions }}</div>
              </div>
              <div class="audit-right-box">
                <div class="date">{{ item.CreateTime }}</div>
                <div class="approver">{{ item.CreateUserID }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加使用人 -->
    <use-count-drawer
      ref="UseCountDrawer"
      :total="issueNum"
      :equityID="messageList.ID"
      @update="getIssueList"
    ></use-count-drawer>
  </el-drawer>
</template>

<script>
import UseCountDrawer from "./UseCountDrawer.vue";
const tabData = [
  {
    ID: 1,
    name: "权益内容"
  },
  {
    ID: 2,
    name: "售卖情况"
  },
  // {
  //     ID: 3,
  //     name: '权益下发'
  // },
  {
    ID: 4,
    name: "审核历史"
  }
];
export default {
  components: { UseCountDrawer },
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      rightList: [],
      tabID: 1,
      historyData: [], // 审核历史
      salesData: [], // 售卖情况
      issueData: [], // 下发核销码列表
      residueData: [], // 剩余核销码列表
      employData: [], // 已使用核销码
      refundRules: [], // 退款规则
      useCount: [], // 使用人列表
      tabData,
      salesPageData: {
        // 售卖情况分页配置
        total: 0,
        currentPage: 1, //当前页
        pageSize: 10 // 每页显示条数
      },
      issuePageData: {
        // 核销码下发分页配置
        total: 0,
        currentPage: 1, //当前页
        pageSize: 10 // 每页显示条数
      },
      residuePageData: {
        // 剩余核销码分页配置
        total: 0,
        currentPage: 1, //当前页
        pageSize: 10 // 每页显示条数
      },
      employPageData: {
        // 已使用核销码分页配置
        total: 0,
        currentPage: 1, //当前页
        pageSize: 10 // 每页显示条数
      },
      issueNum: 0 // 剩余核销码数量
    };
  },
  watch: {
    drawer(v) {
      if (v) {
        this.getRightList();
        this.getSaleData();
        this.getHistoryData();
        this.getIssueList();
        this.getIssueNum();
        // this.getResidueLink()
        // this.getEmployList()
      }
    }
  },
  methods: {
    drawerOp() {
      this.drawer = true;
    },
    changeTab(e) {
      this.tabID = e;
    },
    statusType(status) {
      return status == 2 ? "通过" : status == 3 ? "驳回" : "";
    },
    // 包含权益
    getRightList() {
      let o = this;
      this.rightList = [];
      this.refundRules = [];
      this.useCount = [];
      if (this.messageList.TypeID == 1) {
        this.rightList.push(this.messageList);
        this.useCount.push({
          Name: this.messageList.Name,
          UsersCount: this.messageList.UsersCount
        });
        this.getRefundRules(String(this.messageList.ID));
      } else {
        let IDarr = o.messageList.EquityList.split(",");
        IDarr.forEach(res => {
          this.octopus.request.api.post(
            "/Octopus/Engine/List",
            {
              id: 1195,
              cellData: [
                { name: "Name" }, // 权益标题
                { name: "CompanyID" }, // 提交企业
                { name: "TypeID" }, // 是否为权益礼包
                { name: "StatusName" }, // 审核状态
                { name: "SalePrice" }, // 市场价格
                { name: "EquityServiceRate" }, // 小程序服务费
                { name: "PlatformServiceRate" }, // 平台服务费
                { name: "CostPrice" }, // 平台价格
                { name: "Integral" }, // 让利积分
                { name: "EquityListCount" }, // 权益数量
                { name: "PlatformServicePrice" }, // 平台结算价格（元）
                { name: "EquityServicePrice" }, // 小程序结算价格（元）
                { name: "InventoryQuantity" }, // 库存数量(份)
                { name: "EffectiveTime" }, // 生效时间
                { name: "EquityShelfTime" }, // 小程序上架时间
                { name: "CreateTime" }, // 提交时间
                { name: "EquityFlagList" }, // 权益标签
                { name: "EquityFlagListName" }, // 权益标签
                { name: "EquityList" }, // 权益集合
                { name: "EquitySoldQuantity" }, // 小程序销售数量
                { name: "ExpireTime" }, // 过期时间
                { name: "ID", filterKey: "=", filterValue: res }, // ID
                { name: "IsOpenSale" }, // 是否允许在其他国企平台售卖
                { name: "IsRefund" }, // 是否允许退款
                { name: "MainPicturePath" }, // 主图
                { name: "MinimumQuantity" }, // 起售数量
                { name: "PlatformShelfTime" }, // 权益平台上架时间
                { name: "PlatformSoldQuantity" }, // 权益平台销售数量
                { name: "ProductCode" }, // 合同编号
                { name: "ProductFlagList" }, // 产品类型
                { name: "ProductFlagListName" }, // 产品类型
                { name: "ProductID" }, // 产品ID
                { name: "SecondaryPicturePath" }, // 副图
                { name: "SoldQuantity" }, // 总销量
                { name: "Status" }, // 审核状态
                { name: "TransferRuleID" }, // 采购公司限制
                { name: "TransferRuleIDName" }, // 采购公司限制
                { name: "UsersCount" }, // 使用人数
                { name: "VerifiedQuantity" } // 已核销数量
              ],
              paramData: {
                CompanyID:
                  this.octopus.passport.authorization.company == 1
                    ? "NULL"
                    : this.octopus.passport.authorization.company
              }
            },
            datas => {
              if (datas.status.code == 200) {
                const data = datas.content.queryData[0];
                this.rightList.push(data);
                this.useCount.push({
                  Name: data.Name,
                  UsersCount: data.UsersCount
                });
                // 添加退款规则
                let strID = IDarr.join(",");
                this.getRefundRules(strID);
              } else {
                this.octopus.tips.error(datas);
              }
            }
          );
        });
      }
    },

    // 获取审核历史
    getHistoryData() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1205,
          cellData: [
            { name: "CreateTime" }, // 时间
            { name: "ID" }, // ID
            { name: "Opinions" }, // 审核内容
            { name: "Status" }, // 审核状态
            { name: "StatusID" }, // 审核状态
            { name: "CreateUserID" } //创建人
          ],
          paramData: {
            EquityID: this.messageList.ID
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.historyData = datas.content.queryData;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },

    // 获取售卖情况
    getSaleData() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1268,
          cellData: [
            { name: "CreateTime" }, // 下单时间
            { name: "ID" }, // ID
            { name: "Name" }, // 权益名称
            { name: "PayCode" }, // 订单编号
            { name: "PurchaserID" }, // 买家
            { name: "Quantity" }, // 购买数量
            { name: "ServiceCompanyName" }, // 服务方
            { name: "Status" }, // 使用状态
            { name: "TotalPrice" } // 下单金额
          ],
          pageData: {
            index: this.salesPageData.currentPage,
            rowSize: this.salesPageData.pageSize
          },
          paramData: {
            CompanyID:
              this.octopus.passport.authorization.company == 1
                ? "NULL"
                : this.octopus.passport.authorization.company,
            EquityID: this.messageList.ID
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.salesPageData.total = datas.content.pageData.totalRows;
            this.salesData = datas.content.queryData;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    // 获取核销码下发列表
    getIssueList() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1274,
          cellData: [
            { name: "ID" }, // ID
            { name: "Name" }, // 使用人
            { name: "PayTime" }, // 下发时间
            { name: "Quantity" }, // 数量
            { name: "Status" }, // 使用状态
            { name: "StatusID" } // StatusID
          ],
          paramData: {
            CompanyID: this.octopus.passport.authorization.company,
            EquityID: this.messageList.ID
          },
          pageData: {
            index: this.issuePageData.currentPage,
            rowSize: this.issuePageData.pageSize
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.issuePageData.total = datas.content.pageData.totalRows;
            this.issueData = datas.content.queryData;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    // 获取剩余核销码数量
    getIssueNum() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1279,
          cellData: [
            { name: "RemainingQuantity" } // 剩余核销码数量
          ],
          paramData: {
            CompanyID: this.octopus.passport.authorization.company,
            EquityID: this.messageList.ID
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.issueNum = datas.content.queryData[0]
              ? datas.content.queryData[0].RemainingQuantity
              : 0;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    // 剩余核销码链接列表
    getResidueLink() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1195,
          cellData: [],
          pageData: {
            index: this.residuePageData.currentPage,
            rowSize: this.residuePageData.pageSize
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.residuePageData.total = datas.content.pageData.totalRows;
            this.historyData = datas.content.queryData;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    // 已使用核销码列表
    getEmployList() {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1195,
          cellData: [],
          pageData: {
            index: this.employPageData.currentPage,
            rowSize: this.employPageData.pageSize
          }
        },
        datas => {
          if (datas.status.code == 200) {
            this.employPageData.total = datas.content.pageData.totalRows;
            this.historyData = datas.content.queryData;
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    // 退款规则
    getRefundRules(str, type = 2) {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 1241,
          cellData: [
            { name: "CompanyID" }, // 公司ID
            { name: "CreateTime" }, // 创建时间
            { name: "CreateUserID" }, // 创建人
            { name: "EquityID" }, // 权益ID
            { name: "EquityName" }, // 权益名称
            { name: "ID" }, // ID
            { name: "InventoryID" }, // 库存
            { name: "Name" }, // 规则名称
            { name: "ProductID" }, // 产品
            { name: "ServiceCharge" }, // 手续费（%）
            { name: "Status" }, // 是否启用
            { name: "TimeLimit" }, // 时限（默认小时）
            { name: "TypeID" }, // 规则类型（1小时  2天）
            { name: "UpdateTime" } // 修改时间
          ],
          paramData: {
            EquityID: str
          }
        },
        datas => {
          if (datas.status.code == 200) {
            let item = datas.content.queryData;
            this.refundRules = [];
            this.rightList.map(v => {
              let find = item.filter(x => x.EquityID == v.ID);
              this.refundRules.push({
                Name: v.Name,
                list: [...find]
              });
            });
          } else {
            this.octopus.tips.error(datas);
          }
        }
      );
    },
    handleShowUseCount() {
      this.$refs.UseCountDrawer.open();
    },

    // 售卖情况分页查询
    handleSalesChange(val) {
      this.salesPageData.currentPage = val;
      this.getSaleData();
    },
    // 下发核销码分页查询
    handleIssueChange(val) {
      this.issuePageData.currentPage = val;
      this.getCodeList();
    },
    // 剩余核销码分页查询
    handleResidueChange(val) {
      this.residuePageData.currentPage = val;
      this.getResidueLink();
    },
    // 已使用核销码分页查询
    handleEmployChange(val) {
      this.employPageData.currentPage = val;
      this.getEmployList();
    }
  }
};
</script>
<style scoped>
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.button_box .button {
  margin-right: 0.8rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  background-color: #fff;
  color: #f78c55;
  box-shadow: 0px 0px 7px 0px rgb(180 171 206 / 53%);
  border-radius: 0.8rem;
  cursor: pointer;
}

.button_box .button_color {
  color: #fff !important;
  background-color: #f78c55 !important;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  /* display: flex; */
  width: 100%;
  /* justify-content: space-between; */
  padding-bottom: 1rem;
}

.drawer_content .block {
  position: relative;
  width: 100%;
  height: fit-content;
}

.drawer_content .block_title {
  margin: 2rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.drawer_content_list {
  height: 100%;
  padding: 3rem;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4),
    inset 0px 0px 8px 0px rgba(247, 246, 250, 0.5),
    inset 0px 0px 4px 0px #eeecf4;
  width: 25.5%;
  top: 0;
}

.drawer_content_right {
  width: 73%;
  right: 0;
}

.drawer_content_list .name {
  line-height: 3rem;
}

.drawer_content_left {
  position: relative;
  background-color: #fdfdfd;
}

.drawer_content .line {
  position: absolute;
  display: flex;
  width: 5rem;
  justify-content: space-between;
  right: -3rem;
  border: none;
  z-index: 100;
}

.drawer_content .line .yuan {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #c6c6c9;
}

.drawer_content .line .xian {
  position: absolute;
  width: 4rem;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  height: 0.5rem;
  background-color: #c6c6c9;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4);
}

.text_content {
  position: relative;
  z-index: 1000;
}

.text_content .list_text {
  display: flex;
  padding: 0 3rem;
  box-sizing: border-box;
  justify-content: space-between;
}

.text_content .list_text > div {
  font-size: 1.6rem;
  line-height: 6rem;
  border-bottom: 1px solid #e6e6e6;
}
.flexc .list_text {
  display: flex;
  flex-direction: column;
}

.text_content .list_text .list_text_left {
  width: 19.5%;
}

.text_content .list_text .list_text_right {
  width: 71%;
}
.text_content .list_text .list_text_right.list_text_flex {
  display: flex;
  align-items: center;
}
.text_content .list_text .list_text_right.list_text_flex .tag {
  border: 1px solid rgba(0, 0, 0, 0.8);
  margin: 0;
  padding: 0.4rem;
  margin-left: 1rem;
  font-size: 1.6rem;
  line-height: 2rem;
  border-radius: 0.3rem;
}

.text_content .list_text .list_text_right img {
  width: 12rem;
  height: 12rem;
  margin-top: 1rem;
  margin-right: 0.6rem;
  margin-bottom: 1rem;
}

.list_text_right_table {
  margin-top: 1rem;
}

.list_text_right_table > div {
  display: flex;
  text-align: center;
  justify-content: space-between;
  box-sizing: border-box;
  line-height: 3rem;
  padding: 1rem 1.5rem;
}

.list_text_right_table .tr {
  color: #827070;
}

.list_text_right_table .tr:nth-of-type(odd) {
  background-color: #fdfbfa;
}

.drawer_content .list_title {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}

.history {
  margin-left: 2em;
  margin-top: 1em;
  height: 82rem;
  padding: 0 20px;
  overflow-y: auto;
  
}
.history .audit-item {
  display: flex;
}
.history .audit-item .audit-left {
  position: relative;
  width: 2px;
  height: 60px;
  border-radius: 4px;
  background-color: #dfdfdf;
}
.history .audit-item .audit-left::before {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff8755;
}
.history .audit-item .audit-right {
  margin-left: 16px;
}

.history .audit-item .audit-right .audit-right-box {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.history .audit-item .audit-right .audit-right-box:not(:first-child) {
  margin-top: 8px;
}
.history .audit-item .audit-right .audit-right-box .tag {
  font-size: 1em;
  padding: 1px 2px;
  color: #fff;
  border-radius: 2px;
  margin-right: 6px;
}
.history .audit-item .audit-right .audit-right-box .tag.success {
  background-color: #3fdf72;
}
.history .audit-item .audit-right .audit-right-box .tag.info {
  background-color: #43b4ff;
}
.history .audit-item .audit-right .audit-right-box .tag.error {
  background-color: #f75352;
}
.history .audit-item .audit-right .audit-right-box .date {
  margin-right: 6px;
}

.status-box {
  border: 1px solid transparent;
  border-radius: 0.6rem;
  /* font-size: 1.6rem; */
  text-align: center;
}
.status13 {
  border-color: #0c8e29;
  color: #0c8e29;
  background-color: #f1fdf4;
}
.status15 {
  border-color: #b751c3;
  color: #b751c3;
  background-color: #fffaff;
}
.status17 {
  border-color: #20e65f;
  color: #20e65f;
  background-color: #effdf4;
}
.sales-status {
  overflow-y: auto;
  height: 87vh;
}
</style>
